<template>
    <div id="bourse">
        <section class="bourse-banner">
            <div class="bourse-title">
                <h5>数字货币交易解决方案</h5>
                <p>安全高效 数据保障 快速部署</p>
            </div>
        </section>
        <section class="exchange">
            <div class="exchange-title">
                <h5>数字货币交易所</h5>
                <p>Digital Money Exchange</p>
            </div>
            <div class="exchange-cont container">
                <div class='exchange-left'>
                    <p>量子数字货币交易所系统包含基于区块链技术的完整支持数字货币资产的发行、交易、管理等一系列流程。另外进一步完善数字资产交易机制，从增强安全防护级别、杠杆金融交易体系、平台推广运营机制等方面，不断优化核心功能，提高产品的综合优势。系统采用金融系统主流的Java语言开发，分布式系统架构。</p>
                    <ul>
                        <li v-for="(item, index) in exchangeList" :key="index">
                            <span class="icon">
                                <i class="iconfont" v-html="item.icon"></i>
                            </span>
                            <span>{{item.txt}}</span>
                        </li>
                    </ul>
                </div>
                <div class='exchange-img'>
                    <img src="../../assets/exchange_icon.png" alt="">
                </div>
            </div>
            <section class="exchange-case">
                <div class="case-title">
                    <h5>解决方案</h5>
                    <p>Solution</p>
                </div>
                <div class="exchange-list container">
                    <ul>
                        <li v-for="(item, index) in solutionList" :key="index">
                            <div class="icon-box">
                                <i class="iconfont"  v-html="item.icon"></i> 
                            </div> 
                            <div class="exchangeCont">
                                <h6>{{item.title}}</h6>
                                <p>{{item.dir}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <section class="exchange-case sys-good">
                <div class="case-title">
                    <h5>系统优势</h5>
                    <p>System Advantage</p>
                </div>
                <div class="container">
                    <img src="../../assets/sys-good.png" alt="">
                </div>
            </section>
            <section class="exchange-case sys-dir">
                <div class="case-title">
                    <h5>系统体系</h5>
                    <p>Systematic System</p>
                </div>
                <div class="container">
                    <img src="../../assets/sys-dir.png" alt="">
                </div>
            </section>
        </section>
    </div>
</template>

<script>
    export default {
        name:'bourse',
        data () {
            return {
                exchangeList:[
                    {
                        icon:'&#xe626;',
                        txt:'分布式架构，多级缓存，完美支持多并开发'
                    },
                    {
                        icon:'&#xe623;',
                        txt:'支持限价、市价等多种交易模式，覆盖用户需求'
                    },
                    {
                        icon:'&#xe625;',
                        txt:'交易所、商城全力打造数币生态圈'
                    }
                ],
                solutionList:[
                    {
                        icon:'&#xe627;',
                        title:'币币交易',
                        dir:'支持多币对行情拓展、打造极速快捷交易体验'
                    },
                    {
                        icon:'&#xe628;',
                        title:'OTC交易',
                        dir:'支持多种支付方式、方便用户实时入场交易'
                    },
                    {
                        icon:'&#xe624;',
                        title:'杠杆交易',
                        dir:'支持多币对行情拓展、打造极速快捷交易体验'
                    },
                    {
                        icon:'&#xe629;',
                        title:'合约交易',
                        dir:'支持多种支付方式、方便用户实时入场交易'
                    }
                ]
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '../../static/styl/mixin.styl';
#bourse
    .bourse-banner
        height 697px
        bgImg('../../assets/bourse_bg.png', cover)
        .bourse-title
            padding-top 330px
            text-align center
            color #fff
            h5
                font-size 52px
                margin-bottom 33px
            p
                font-size 22px
    .exchange,
    .exchange-case
        background-color #fff
        padding-top 100px
        padding-bottom 83px
        .exchange-title,
        .case-title
            padding-bottom 55px
            text-align center
            h5
                font-size 42px
                margin-bottom 19px
            p
                font-size 16px
        .exchange-cont
            display flex
            justify-content space-between
            padding-bottom 100px
            .exchange-img
                width 447px
                height 265px
            .exchange-left
                width 487px
                p
                    font-size 14px
                    color #666
                    line-height 26px
                ul
                    li
                        margin-top 30px
                        color #666
                        .icon
                            width 26px
                            height 26px
                            margin-right 20px
                            vertical-align middle
                            i
                                font-size 20px !important
                                color #30B9FF
    .exchange-case
        background-color #F7F8FA
        .exchange-list
            ul
                display flex
                justify-content center
                flex-wrap wrap
                margin 0 auto
                li
                    width 500px
                    height 150px
                    box-sizing border-box
                    padding 0 50px
                    display flex
                    justify-content flex-start
                    align-items center
                    border-right 1px solid #D2D2D2
                    border-bottom 1px solid #D2D2D2
                    cursor pointer
                    .icon-box
                        transition 1.5s all
                        margin-right 30px
                        i
                            color #656766
                            font-size 40px
                    .exchangeCont
                        h6
                            margin-bottom 22px
                            font-size 20px
                            color #333
                            font-weight bold
                        p
                            font-size 14px
                            color #666
                li:nth-of-type(2n)
                    border-right none
                li:nth-of-type(3),
                li:nth-of-type(4)
                    border-bottom 0
                li:hover
                    .icon-box
                        transform rotateY(360deg)
    .sys-good
        background-color #fff
        padding-bottom 120px
        .case-title
            margin-bottom 80px
    .sys-dir
        background-color #F7F8FA
        .case-title
            margin-bottom 48px
</style>
